﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>html 事件</title>
    <meta charset="utf-8" />
    <link href="Content/bootstrap.min.css" rel="stylesheet" />
</head>
<body class="container">
    <div class="row">
        <div class="col-md-4">
            <h3>点击</h3>
            <button class="btn" onclick="javascript: var i = '789';alert(i);">按钮1</button>
            <button class="btn" onclick="fn1();">按钮2</button>
            <button class="btn" onclick="alert('3')">按钮3</button>
            <button class="btn" ondblclick="alert('4')">双击按钮4</button>

        </div>
        <div class="col-md-4">
            <h3>鼠标</h3>
            <h4><span class="label label-default " onmouseover="alert('鼠标拿开');">鼠标来这里</span></h4>
            <h4><span class="label label-default " onmousedown="alert('鼠标拿开');">鼠标按下去，不用抬起来</span></h4>
            <h4><span class="label label-default " onmouseup="alert('鼠标拿开');">鼠标按下去</span></h4>
            <h4><span class="label label-default " onmouseout="alert('鼠标拿开');">鼠标离开</span></h4>
            <h4><span class="label label-default " onmousemove="console.log('鼠标拿开');">鼠标在这个区域移动一下</span></h4>
        </div>
        <div class="col-md-4">
            <h3>光标</h3>
            <input type="text" onblur="alert('丢失光标了');" value="" placeholder="失去光标" />
            <input type="text" onfocus="console.log('获取到光标了');" value="" placeholder="点这里" />
        </div>
        
    </div>
<div class="row" style="margin-top: 200px;">
    <form role="form" onsubmit="return fnsubmit();" onreset="alert('reset');">
        <div class="form-group">
            <select onchange="selectChange(this);" id="s1">
                <option value="1">更改值为1 会触发</option>
                <option value="2">更改值为2 会触发</option>
                <option value="3">更改值为3 会触发</option>
            </select>
            
        </div>
        <div class="form-group">
            <input type="text" onchange="alert(this.value);" value="" placeholder="改变这个值试试" />
            <input type="text" oninput="alert(this.value);" value="" placeholder="改变这个值试试" />
        </div>
        <div class="form-group">
            <textarea onselect="alert('onselect');" cols="40">123456789007654534332sbscdefg</textarea>

        </div>
        <div class="form-group">
            <input type="submit" value="提交" />
            <input type="reset" value="重置" />
        </div>
    </form>
</div>
    <div class="row"></div>


    <script>

        function fn1() {
            alert('2');
        }

        function selectChange(obj) {
            alert(obj.value);
        }

        function fnsubmit() {
            var s1 = document.getElementById('s1').value;
            var obj = {};
            obj.s1 = s1;
            console.log(obj);
            console.log("Submit");
            return false; //不用提交
        }
    </script>
</body>
</html>
